<template>
  <div>
    <van-sticky>
      <van-nav-bar title="分类" class="titleTop" />
    </van-sticky>
    <img src="../assets/imgs/header.jpg" class="header" />
    <!-- 侧边导航 -->
    <div class="select">
      <van-tree-select
        height="175vw"
        :items="items"
        :main-active-index.sync="active"
        @click-nav="getAllShops"
      >
        <!-- 右侧导航 -->
        <template #content>
          <van-card
            class="card"
            v-for="item in shop"
            :key="item.id"
            :thumb="item.img"
          >
            <template #title>
              <div class="title">{{ item.title }}</div>
            </template>
            <template #price>
              <div class="price">￥{{ item.price }}</div>
            </template>
          </van-card>
        </template>
      </van-tree-select>
    </div>
    <!-- 实现底部导航栏 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "Classify",
  components: {
    Tabbar,
  },
  data() {
    return {
      active: 0,
      items: [
        { text: "Xiaomi手机" },
        { text: "Redmi 红米" },
        { text: "游戏手机" },
        { text: "电脑平板" },
        { text: "智能穿戴" },
        { text: "电视" },
        { text: "大家电" },
        { text: "小家电" },
        { text: "智能家居" },
        { text: "户外出行" },
        { text: "日用百货" },
        { text: "儿童用品" },
        { text: "有品精选" },
        { text: "小米服务" },
      ],
      shop: [],
    };
  },
  mounted() {
    this.getAllShops(this.active);
  },
  methods: {
    getAllShops(index) {
      // 获取所有商品
      this.$axios
        .get("/classes?index=" + index)
        .then((res) => {
          if (res.statusText == "OK") {
            this.shop = res.data;
          } else {
            console.log("出错了!");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
/* 标题 */
.title {
  font-size: 16px;
}
/* 价格 */
.price {
  color: #ff6700;
  font-size: 14px;
}
/* 标题栏 */
.titleTop {
  background: #fafafa;
}
/* 图片 */
.header {
  width: 390px;
}
</style>